import React, { FC } from "react";
import { useTitle } from "ahooks";
import { Empty, Spin, Typography } from "antd";
import QuestionCard from "../../components/QuestionCard";
import ListSearch from "../../components/ListSearch";
import ListPage from "../../components/ListPage";
import useLoadQuestionListData from "../../hooks/useLoadQuestionListData";
import styles from "./Common.module.scss";
const { Title } = Typography;
const Star: FC = () => {
  useTitle("星瑞问卷 - 星标问卷");
  //自定义 hook 获取(查询）用户列表
  const {
    loading,
    data = {},
  } = useLoadQuestionListData({ isStar:true });
  const { list = [], total = 0 } = data;
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.content}>
        {loading && (
          <div
            style={{
              textAlign: "center",
              marginTop: "60px",
              color: "palegoldenrod",
            }}
          >
            <Spin tip="正在加载，请稍后" size="large" />
          </div>
        )}
        {!loading && list.length === 0 && <Empty description="暂无数据" />}
        {!loading &&
          list.length > 0 &&
          list.map((q: any) => {
            const { _id } = q;
            return <QuestionCard {...q} key={_id} />;
          })}
      </div>
      <div className={styles.footer}>
        {!loading && list.length !== 0 && <ListPage total={total}/>}
      </div>
    </>
  );
};
export default Star;
